<template>
  <el-tabs
      v-model="computedConfig.activeTab"
      :type="computedConfig.type"
      :closable="computedConfig.closable"
      :tab-position="computedConfig.tabPosition"
      :addable="computedConfig.addable"
      :editable="computedConfig.editable"
      :stretch="computedConfig.stretch"
      :before-leave="computedConfig.beforeLeave"
  >
    <el-tab-pane
        v-for="(configItem, configIndex) in computedConfig.item"
        v-if="computeBoolen(configItem.show, true)"
        :Key="configIndex"
        :name="configItem.name"
        :label="configItem.label"
        :closable="configItem.closable"
        :disabled="configItem.disabled"
        :lazy="configItem.lazy"
    >
      <template v-for="(tabItem, tabIndex) in configItem.item">
        <xForm
            :ref="`${tabItem.name}_XForm`"
            v-if="tabItem.xType === 'form' && computeBoolen(tabItem.show, true)"
            :key="tabIndex"
            v-model="formData[configItem.name]"
            :config="tabItem"
        >
          <template v-for="tabFormItem in tabItem.item">
            <!-- 自定义表单区域 -->
            <slot v-if="typeof tabFormItem.slot === 'string'" :slot="tabFormItem.slot" :name="tabFormItem.slot" :config="tabFormItem" />
            <!-- 自定义表单字段 -->
            <slot v-else-if="getComponentType(tabFormItem) === 'slot'" :slot="tabFormItem.name" :name="tabFormItem.name" />
          </template>
        </xForm>

        <!-- 加载卡片布局 -->
        <el-card v-else-if="tabItem.xType === 'card' && computeBoolen(tabItem.show, true)"
                 :shadow="computedConfig.card.shadow"
                 :body-style="computedConfig.card.bodyStyle"
                 :style="computedConfig.card.style"
        >
          <template slot="header">
            <div class="clearfix">
              <div>
                <span class="title">{{ tabItem.label }}</span>
              </div>
              <div class="button-group">
                <template v-for="(btn, btnIndex) in tabItem.headerBtn">
                  <el-button
                      v-if="computeBoolen(btn.show, true)"
                      :key="btnIndex"
                      :size="btn.size"
                      :type="btn.type"
                      :plain="btn.plain"
                      :round="btn.round"
                      :circle="btn.circle"
                      :loading="btn.loading"
                      :disabled="btn.disabled"
                      :icon="btn.icon"
                      :autofocus="btn.autofocus"
                      :native-type="btn.nativeType"

                      @click="btn.click(formData[configItem.name][tabItem.name])"
                  >
                    {{ btn.text }}
                  </el-button>
                </template>
              </div>
            </div>
          </template>
          <xForm :ref="`${tabItem.name}_XForm`" v-model="formData[configItem.name][tabItem.name]" :config="tabItem">
            <template v-for="formItem in tabItem.item">

              <slot v-if="typeof formItem.slot === 'string'" :slot="formItem.slot" :name="formItem.slot" :config="formItem" />

              <slot v-else-if="getComponentType(formItem) === 'slot'" :slot="formItem.name" :name="formItem.name" />
            </template>
          </xForm>
        </el-card>
      </template>

      <slot :name="configItem.name" />

    </el-tab-pane>
  </el-tabs>
</template>

<script>
import mixinComponent from '../../common/xMixin'
import {merge} from "lodash";
import xForm from "../../xForm/src/xForm";
import {getComponentType} from "../../common/util";

export default {
  name: "xTabs",
  mixins: [mixinComponent()],
  components: {xForm},
  data() {
    return {
    }
  },
  computed: {
    computedConfig() {
      const c = {}
      merge(c, this.globalConfig.xtabs, this.config)
      return c
    },
  },
  created() {
    this.initFormData()
  },
  methods: {
    // 初始化表单数据
    initFormData() {
      this.config.item.forEach(tab => {
        if (tab.name && this.formData[tab.name] === undefined) {
          this.$set(this.formData, tab.name, {})
        }
        if (tab.item) {
          tab.item.forEach(xItem => {
            if (xItem.xType === 'card') {
              if (!this.formData[xItem.name]) {
                this.$set(this.formData[tab.name], xItem.name, {})
              }
            }
          })
        }
      })
      this.formData = JSON.parse(JSON.stringify(this.formData))
    },
    // 获取动态组件类型
    getComponentType: getComponentType,
  }
}
</script>

<style scoped lang="scss">

.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;

  .title {
    font-size: 18px;
  }

  .button-group {

  }

}
</style>
